import React from 'react';
import { Select, Input, Form } from 'antd';
import { NavBar, Icon } from 'antd-mobile';
import { primaryColor } from '@/defaultSettings';

import styles from './ConfirmReject.less';
import useHireReject from '../hooks/useHireReject';
import { PageWrap } from './components';

const ConfirmReject = ({ form, setStatus, location }) => {
    const { query } = location;
    const { employId } = query;
    const { getFieldDecorator } = form;
    const { optionList, handleSubmit } = useHireReject({ form, setStatus, employId });

    return (
        <PageWrap>
            <NavBar
                mode="light"
                icon={<Icon style={{ color: '#2A2F3C' }} type="left" />}
                onLeftClick={() => setStatus('')}
                rightContent={[
                    <span style={{ color: primaryColor }} onClick={handleSubmit}>
                        提交
                    </span>
                ]}
            >
                拒绝录用
            </NavBar>
            <div className={styles.page}>
                <div className={styles.form}>
                    <div className={styles.formWrap}>
                        <Form layout="vertical">
                            <Form.Item required label="原因">
                                {getFieldDecorator('terminationType', {
                                    rules: [{ required: true, message: '请选择原因' }]
                                })(
                                    <Select placeholder="请选择">
                                        {optionList.map(item => (
                                            <Select.Option key={item.value} label={item.label}>
                                                {item.label}
                                            </Select.Option>
                                        ))}
                                    </Select>
                                )}
                            </Form.Item>
                            <Form.Item label="备注（选填）">
                                {getFieldDecorator(
                                    'remark',
                                    {}
                                )(
                                    <Input.TextArea
                                        placeholder="最多200个字符"
                                        maxLength={200}
                                        style={{ height: 160 }}
                                    ></Input.TextArea>
                                )}
                            </Form.Item>
                        </Form>
                    </div>
                </div>
            </div>
        </PageWrap>
    );
};

export default Form.create()(ConfirmReject);
